<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <center>
        <br><br>
        添加用户:<br><br>
        姓名: <input type="text" name="name" id="name" value="xq" />&nbsp;&nbsp;
        email: <input type="text" name="email" id="email" value="xq@163.com" />&nbsp;&nbsp;
        电话: <input type="text" name="tel" id="tel" value="139" /><br><br>
        <button id="addUser">提交</button>
        <button id="deleteUser">删除</button>
        <br><br>
        <hr>
        <br><br>
        <table id="usertable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
            <tr>
                <th><input type="checkbox" id="allCheckbox"/></th>
                <th>姓名</th>
                <th>email</th>
                <th>电话</th>
                <th>删除</th>
                <th>修改</th>
            </tr>
            </tbody>
        </table>
        <br>
        <br>
        <br>
        <hr>
        修改用户:<br><br>
        姓名: <input type="text" name="name" id="name_update" />&nbsp;&nbsp;
        email: <input type="text" name="email" id="email_update" />&nbsp;&nbsp;
        电话: <input type="text" name="tel" id="tel_update" /><br><br>
        <input type="hidden" id="id_update"/>
        <button id="updateUser">提交</button>
    </center>
</body>


	<script type="text/javascript" src="../../js/jquery-1.4.1.js" ></script>
	
	<script>
		
		
		$(function(){
			
			
			
			
			
			//删除的逻辑
			$('#deleteUser').click(function(){
				
				console.log('delete...');
				
				var name = $('input[name="name"]').val();
				var email = $('input[name="email"]').val();
				var tel = $('input[name="tel"]').val();
				
				
				
				
				var trs = $('tr');
				
				console.log(trs.length);
				
				
				trs.each(function(index,data){
					
					
					// _data  tr    ? tr td 内容
					var _data= $(data);
					
					
					//eq 的下标从0开始
					var tds =  _data.children('td');
;
					console.log(tds);
					
					var xingming = tds.eq(1).text();
					
					console.log('xingming='+xingming);
					
					
					var youxiang  = tds.eq(2).text();
					
					
					var dianhua = tds.eq(3).text();
					
					
					var tiaojian1 = name ==''?false:name ==  xingming;
					var tiaojian2 = email==''?false:email== youxiang;
					var tiaojian3 = tel  ==''?false:dianhua == tel;
					
					if( tiaojian1 ||  tiaojian2 || tiaojian3 ){
						_data.remove();
					}
					
					
					
				});
			});
			
			
			
			
			//增加的逻辑
			$('#addUser').click(function(){
				
				
				console.log('aaa');
				
				var name = $('input[name="name"]').val();
				var email = $('input[name="email"]').val();
				var tel = $('input[name="tel"]').val();
				
				var ch = $("<td><input type='checkbox'/></td>")
				var nameTd = $("<td>"+name+"</td>");
				var emailTd= $("<td>"+email+"</td>");
				var telTd  = $("<td>"+tel+"</td>");
				var deleteTd= $("<td>删除</td>");
				
				
				//让行号可以动态变化
				var trs = $('#usertable tbody tr');
				var hang = trs.length;
				
				
				var updateTd= $("<td><input type='button' hang='"+hang+"' value='修改' onclick='scottUpdateUser(this);' /></td>");
				
				
				var tr = $("<tr></tr>");
				
				tr.append(ch);
				tr.append(nameTd);
				tr.append(emailTd);
				tr.append(telTd);
				tr.append(deleteTd);
				tr.append(updateTd);
				
				
				//把tr增加到  usertable
				
				$('#usertable').append(tr);
			});
			
		});
		
		
		
		function scottUpdateUser(_this){
		
		
			//?
			console.log(_this);
			
			var $this = $(_this);
			
			
			var hang = $this.attr('hang');
			console.log('hang='+$this.attr('hang'));
			
			
			var tds = $this.parent().parent().children('td');
			var xq= tds.eq(1).text();
			console.log('xq='+xq);
			
			var yx= tds.eq(2).text();
			
			var tel= tds.eq(3).text();
			
			
			
			$('#name_update').val(xq);
			$('#email_update').val(yx);
			$('#tel_update').val(tel);
			
			
			console.log('scottUpdateUser...');
		}
		
	</script>
</html>